Color Extraction Using Cosine Similarity

Cosine Similarity

Euclidian Dot Product

$$u \cdot v = \|u\|\|v\| cos(\theta)$$

where ‖𝑢‖ and ‖𝑣‖ represents normed vectors.

similarity =

$$cos(\theta) = {{u \cdot v}\over{\|u\|\|v\|}} = {{{\Sigma_{i=1}^{n}u_i}+{\Sigma_{i=1}^{n}v_i}}\over{{\sqrt{\Sigma_{i=1}^{n}u_i^2}}{\sqrt{ \Sigma_{i=1}^{n}v_i^2}}}}$$

NOTE: vector divided by the normed vector is the unit vector (vector with length=1), therefore, $cos(\theta)$ = the product of unit vectors.

Since the range of $cos(\theta)$ is [0, 1] when the range of $\theta$ is [0, $\pi\over{2}$], it can be said that two vectors are similar when $\theta = 0$ (parallel) with $cos(\theta) = 1$ and dissimilar when $\theta = {\pi\over{2}}$. (orthogonal) with $cos(\theta) = 0$.

Hypothesis

Since images are vectors with shape (height, width, color), we can deternmine how similar an image is to a certain color.

Color Similarity

Result

image-2.png

Closer to the target value, cos(theta) gets close to 0, meaning lighter color
Farther, cos(theta) gets close to 1, meaning darker

Color Extraction

Now that we examined the how color similarity works, we can extract a target color with cerain similarity value between 0 and 1.

Result

image-2.png

As you can see in the image above, the blue part of the image turned gray and red-like colors only remained. There can be some green or non-red colors because the threshold was 0.5, not 1 (which would mean complete red).

Further Studies

However when the color target is set to white (255, 255, 255), the color extraction fails and all the colors gets shown. image-3.png

This may by due to the fact that the image is using RGB color system. image-7.png

There are other color systems, such as HSL (Hue Saturation Lightness) and HSV (Hue Saturation Value). image-4.png

Current issue: non-white areas are shown as black not gray. there are still some non-white colors mixed in to the color extraction. image.png

Referances: